<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="newAdd">
        <h1>新增成员</h1>
        <form class="info" autocomplete="off">
            姓名：<input type="text" class="uname" name="uname"/>
            年龄: <input type="text" class="age" name="age"/>
            性别：
            <select class="gender" name="gender">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            薪资：<input type="text" class="salary" name="salary"/>
            就业城市：
            <select class="city" name="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
                <option value="郑州">郑州</option>
            </select>
            <button class="add">录入</button>
        </form>
    </div>
    
    <div class="list">
        <h1>就业榜</h1>
        <table>
          <thead>
            <tr>
              <th>学号</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
              <th>薪资</th>
              <th>就业城市</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 
              <tr>
                <td>1001</td>
                <td>欧阳霸天</td>
                <td>19</td>
                <td>男</td>
                <td>15000</td>
                <td>上海</td>
                <td>
                  <a href="javascript:">删除</a>
                </td>
              </tr> 
              -->
          </tbody>
        </table>  
    </div>

<script>
    // 参考数据
    const initData = [
      {
        stuId: 1001,
        uname: '欧阳霸天',
        age: 19,
        gender: '男',
        salary: '20000',
        city: '上海',
      }
    ]
    // localStorage.setItem('data',JSON.stringify(initData))
    //1. 渲染业务
    // 1.1  先读取本地存储的数据  
    // （1）. 本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面
    // （2）. 如果没有数据，则用 空数组来代替
    const arr = JSON.parse(localStorage.getItem('data')) || []
    console.log(arr)
    // 1.2 利用 map 和join 方法来渲染页面
    const tbody = document.querySelector('tbody')
    function render(){
        //(1).利用map 遍历数组，返回对应 tr 的数组
    const trArr = arr.map(function(ele,index){
            return `
                <tr>
                    <td>${ele.stuId}</td>
                    <td>${ele.uname}</td>
                    <td>${ele.age}</td>
                    <td>${ele.salary}</td>
                    <td>${ele.gender}</td>
                    <td>${ele.city}</td>
                    <td>
                      <a href="javascript:" data-id="${index}">删除</a>
                    </td>
                </tr>  
            ` 
        })
        console.log(trArr)
        //(2).把数组转化为字符串 join
        //(3).把生成的字符串追加给tbody
        tbody.innerHTML = trArr.join('')
    }
    render()

    // 2. 新增业务
    // 获取元素
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const info = document.querySelector('.info')
    // 2.1 form 表单注册提交事件，阻止默认行为
    info.addEventListener('submit',function(e){
        // 阻止默认行为 不跳转
        e.preventDefault()
        //2.2 非空判断
        if( !uname.value || !age.value || !salary.value){
            return alert('输入内容不能为空')
        }
        //2.3 给arr 数组追加对象，里面存储 表单获取过来的数据
        arr.push({
            // 处理stuId 数组最后一条数据的stuId + 1
            stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
            uname: uname.value,
            age: age.value,
            gender: gender.value,
            salary: salary.value,
            city: city.value
        })
        //2.4 渲染页面和重置表单（reset（）方法）
        this.reset()
        render()
        //2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
        localStorage.setItem('data',JSON.stringify(arr))
    })


    // 3. 删除操作
    // 3.1 事件委托 tbody
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // 3.2 得到当前元素的自定义属性 data-id
        // console.log(e.target.dataset.id)
        // 确认框确认是否要真的删除
        if(confirm('你确定要删除这条数据吗？')){
            // 3.3 根据索引号，利用splice 删除arr 数组里面对应的数据
            arr.splice(e.target.dataset.id, 1)
            // console.log(arr)
            // 3.4 重新渲染一次
            render()
            // 3.5 把最新 arr 数组存入本地存储
            localStorage.setItem('data',JSON.stringify(arr))
        }
      }
    })
</script>
</body>